<template>
  <div class="drawerPosition-container">
    <el-drawer
      title="修改区、位信息"
      :visible.sync="dialogFormVisible"
      :wrapper-closable="false"
      size="50%"
      style="height: 100%"
      :before-close="cancel"
    >
      <el-row>
        <el-col
          :push="12"
          :span="6"
        ><el-input
          v-model="input"
          size="small"
          placeholder="分区名"
        /></el-col>
        <el-col :span="3" :push="13">
          <el-button
            type="success"
            size="small"
            :disabled="input === ''"
            @click="addArea"
          >添加分区</el-button>
        </el-col>
      </el-row>
      <!-- 第二行，table显示区、位信息 -->
      <el-row>
        <!-- table，显示区、位信息 -->
        <el-col>
          <el-table
            :data="list"
            style="width: 90%; margin: 10px 0px 0px 10px"
            border
            height="390px"
          >
            <!-- 分区 -->
            <el-table-column
              prop="name"
              label="分区"
              width="50px"
              align="center"
            />
            <!-- 位 -->
            <el-table-column prop="address" label="位" align="center">
              <!-- tag（位）列表 -->
              <template slot-scope="{ row }">
                <el-tag
                  v-for="tag in row.position"
                  :key="tag.id"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(row, tag)"
                >
                  {{ tag.name }}
                </el-tag>
                <el-input
                  v-if="row.inputVisible"
                  ref="saveTagInput"
                  v-model="inputValue"
                  class="input-new-tag"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(row)"
                  @blur="handleInputConfirm(row)"
                />
                <el-button
                  v-else
                  class="button-new-tag"
                  size="mini"
                  @click="showInput(row)"
                >添加</el-button>
              </template></el-table-column>
            <el-table-column
              label="操作"
              width="50px"
              align="center"
            ><template slot-scope="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteArea(row)"
              /> </template></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="text-align: right; margin: 50px 30px 10px 0px">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" type="primary" @click="confirm">确认</el-button>
      </el-row></el-drawer>
  </div>
</template>

<script>
export default {
  name: 'DrawerPosition',
  data() {
    return {
      // 仓库id
      id: '',
      // 控制弹框的显示与隐藏
      dialogFormVisible: false,
      // 区位信息
      list: [],
      // 保存input中输入的值
      inputValue: '',
      // 新增的分区名
      input: ''
    }
  },
  methods: {
    // 重置表单并显示抽屉
    dialogFormOn() {
      // 显示抽屉
      this.dialogFormVisible = true
    },
    // 关闭抽屉
    dialogFormOff() {
      // 关闭（隐藏）抽屉
      this.dialogFormVisible = false
    },
    // 取消添加|修改
    cancel() {
      this.$confirm('是否取消仓库【区、位信息】的修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认取消
        this.dialogFormVisible = false
      }).catch(() => {
        // 取消取消
      })
    },
    // 确认添加|修改
    confirm() {
      this.$confirm('是否确认仓库【区、位信息】的修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.modifyArea()
        // 保存成功，关闭抽屉
        this.dialogFormVisible = false
      }).catch(() => {
        // 取消添加
      })
    },
    // 删除tag
    handleClose(row, tag) {
      row.position.splice(row.position.indexOf(tag), 1)
    },
    // 添加tag
    showInput(row) {
      row.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 确认添加
    handleInputConfirm(row) {
      const inputValue = this.inputValue
      if (inputValue) {
        // 构造对象
        const obj = {
          name: inputValue
        }
        // 将对象添加到位列表中
        row.position.push(obj)
      }
      row.inputVisible = false
      this.inputValue = ''
    },
    // 删除分区
    deleteArea(row) {
      // 不能将id与索引画等号（id未必连续）
      this.list.splice(this.list.indexOf(row), 1)
    },
    // 添加分区
    addArea() {
      // 构造对象
      const obj = {
        // 分区名
        name: this.input,
        // 切换tag和input的标记
        inputVisible: false,
        // 位列表
        position: []
      }
      this.list.push(obj)
      // 清空文本框
      this.input = ''
    },
    // 更新指定仓库区位信息
    async modifyArea() {
      // 调用接口，更新指定仓库区位信息
      const response = await this.$API.warehouse.modifyArea(this.id, this.list)
      // 信息更新成功
      if (response.code === 200) {
        this.$message.success(response.msg)
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>

// tag样式
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

